<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传与下载</title>
</head>
<body>

<h1>文件上传与下载d</h1>

<!-- 文件上传表单 -->
<form id="uploadForm" enctype="multipart/form-data">
     <input type="text" id="name" placeholder="物品名称">
     <input type="number" id="itemQuantity" placeholder="数量">
    <input type="file" id="fileInput" name="file" accept=".txt">
    <button type="button" onclick="uploadFile()">上传</button>
</form>

<!-- 文件下载按钮 -->
<input type="text" id="fileNameInput" placeholder="输入后端downloadfile文件夹下的文件名">
<button onclick="downloadFile()">下载</button>


<script>
    async function uploadFile() {
        const fileInput = document.getElementById('fileInput');
        const file = fileInput.files[0];

        if (file) {
            const formData = new FormData();
            formData.append('file', file);

            try {
                const response = await fetch('http://127.0.0.1:8000/sample/upload/', {
                    method: 'POST',
                    body: formData
                });

                if (response.ok) {
                    alert('文件上传到后端upload_files目录下成功!');
                } else {
                    alert('文件上传失败.');
                }
            } catch (error) {
                console.error(error);
                alert('文件上传失.');
            }
        } else {
            alert('请选择需要上传的文件.');
        }
    }

    async function downloadFile() {
    // 获取输入框中的文件名
    const fileName = document.getElementById("fileNameInput").value;

    try {
        // 使用 fetch 请求下载文件
        const response = await fetch(`http://127.0.0.1:8000/downloadfile/${fileName}`);

        if (response.ok) {
            // 将文件转换为 Blob
            const blob = await response.blob();

            // 创建一个链接并设置下载属性
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = fileName;

            // 模拟点击下载链接
            link.click();
        } else {
            alert('从后端downloadfile目录里下载此文件失败.');
        }
    } catch (error) {
        console.error(error);
        alert('下载文件出错.');
    }
}

</script>
</body>
</html>
